<!--
    @auther: bypanghu<bypanghu@163.com>
    @date: 2024/5/8
    @desc: 竖向柱状图统计图表
-->

<template>
  <Chart :height="height" :option="chartOption" />
</template>

<script setup>
import Chart from "@/components/charts/index.vue";
import useChartOption from '@/hooks/charts';
import { ref } from 'vue';
import { storeToRefs } from "pinia";
import { useAppStore } from '@/pinia';

const appStore = useAppStore();
const { config } = storeToRefs(appStore);

const props = defineProps({
  height: {
    type: String,
    default: '400px', // 调整高度适应柱状图
  },
  data: {
    type: Array,
    default: () => Array.from({ length: 10 }, (_, i) => ({ name: `数据${i+1}`, value: Math.floor(Math.random() * 100) }))
  }
});

const primaryColor = '#0065ff';
const secondaryColor = '#b0d0ff';

const getColor = (value) => {
  const maxValue = Math.max(...props.data.map(item => item.value));
  const minValue = Math.min(...props.data.map(item => item.value));
  const threshold = (maxValue + minValue) / 2;
  return value > threshold ? primaryColor : secondaryColor;
};

const { chartOption } = useChartOption(() => {
  return {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}'
    },
    xAxis: {
      type: 'category',
      data: props.data.map(item => item.name)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '数据',
        type: 'bar',
        data: props.data.map(item => ({
          value: item.value,
          itemStyle: { color: getColor(item.value) }
        })),
        label: {
          show: true,
          position: 'top',
          formatter: '{c}'
        }
      }
    ]
  };
});
</script>

<style scoped lang="scss">
</style>
